import { React, useEffect, useState } from 'react';

import { Mask, ImageUploader, Form, Input, Toast, NavBar, Button, Radio, DatePicker, Collapse, Space, TextArea, Avatar } from 'antd-mobile';

import { Mask,ImageUploader, Form, Input, Toast, NavBar, Button, Radio, DatePicker, Collapse, Space, TextArea, Avatar } from 'antd-mobile';

import { UnorderedListOutline, PayCircleOutline, SetOutline, FireFill } from 'antd-mobile-icons';
import '../css/overview.css';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import axios from 'axios';

const now = new Date();
const min = new Date('1900-01-01');

function Overview() {

    const [visible, setVisible] = useState(false);
    const [vis, setVis] = useState(false);
    const [xuechang, setXuecheng] = useState(false);
    const [head, setHead] = useState('');
    const [name, setName] = useState('');
    const [sex, setSex] = useState('');
    const [phone, setPhone] = useState('');
    const [birthday, setBirthday] = useState('');
    const [education, setEducation] = useState('');
    const [workTime, setWorkTime] = useState('');
    const [status, setStatus] = useState('');
    const [desc, setDesc] = useState('');
    const navigate = useNavigate();
    let time;

    useEffect(() => {
        const basicFact = JSON.parse(localStorage.getItem('basicFact'));
        if (basicFact) {
            console.log(basicFact);
            setHead(basicFact.head);
            setName(basicFact.name);
            setSex(basicFact.sex);
            setPhone(basicFact.phone);
            setBirthday(basicFact.birthday);
            setEducation(basicFact.education);
            setWorkTime(basicFact.workTime);
            setStatus(basicFact.status);
            setDesc(basicFact.desc);
            time = new Date(basicFact.birthday);
            console.log(time);
        }
    }, []);

    const realUpload = (file) => {
        const formData = new FormData();
        formData.append('file', file);

        return axios.post('http://127.0.0.1:3000/upload', formData, {
            headers: {
                'Content-Type':'multipart/form-data'
            }
        })
     .then(response => {
            if (response.data.code === 200) {
                setHead(response.data.path);
                return {
                    url: response.data.path

                };
            } else {
                Toast.show('文件上传失败，请稍后再试');
                return {
                    url: ''
                };
            }
        })
     .catch(error => {
            Toast.show('文件上传出现错误：' + error.message);
            return {
                url: ''
            };
        });
    };
    const WithContent = () => {
        const [visible, setVisible] = useState(false)
        return (
          <>
            <Mask visible={visible} onMaskClick={() => setVisible(false)}>
              <div className='overlayContent'><LimitCount /></div>
            </Mask>
            <Form.Item
                    name='head'
                    label='头像'
                    onClick={() => setVisible(true)}
                >
                    <Avatar
                        key='head'
                        size='large'
                        src={head}
                        style={{ backgroundColor: '#ffc426' }}
                    >
                    </Avatar>
            </Form.Item>
          </>
        )
      }
    const LimitCount = () => {
        const [file, setFile] = useState(null);
        return (
            <div>
                {

                    <ImageUploader
                        value={file? [file] : []}
                        onChange={async value => {
                            if (value.length > 0) {
                                setFile(value[0]);
                            }
                        }}
                        style={{
                            width: '100%',
                            height: '100%',
                        }}
                        upload={realUpload}
                        multiple={false}
                        maxCount={1}
                        showUpload={!file}
                        onCountExceed={exceed => {
                            Toast.show(`最多选择 1 张图片，你多选了 ${exceed} 张`);
                        }}
                    />
                }
            </div>
        );
    };

    const back = () => {
        Toast.show({
            icon: 'loading',
            content: '加载中...',
            duration: 1000,
        });
        navigate('/overview');
    };

    const Submit = () => {
        Toast.show({
            icon: 'loading',
            content: '加载中...',
            duration: 1000,
        });

    };

    return (
        <>
            <div className='top'>
                <NavBar onBack={back}>
                    基本信息
                </NavBar>
            </div>
            
            <div>
                {
                    <>
                    
                    <Form
                        layout='horizontal'
                        onFinish={(values) => {
                            Toast.show({
                                icon: 'loading',
                                content: '加载中...',
                                duration: 1000,
                            });
                            localStorage.setItem('basicFact', JSON.stringify(values));
                            navigate('/overviewUpdate');
                        }}
                        footer={
                            <Button block type='submit' size='large' style={{ backgroundColor: '#ffc426' }}>
                                提交
                            </Button>
                        }>
                        <WithContent />
                        <Form.Item
                            name='name'
                            label='姓名*'
                            rules={[{ message: '姓名不能为空' }]}
                        >
                            <Input key={name} onBlur={(val) => { setName(val) }} defaultValue={name} placeholder='请输入姓名' />
                        </Form.Item>
                        <Form.Item
                            name='sex'
                            label='性别'
                            rules={[{ required: true, message: '性别不能为空' }]}
                        >
                            <Radio.Group key={sex} defaultValue={sex}>
                                <Radio value='男'>男</Radio>
                                <Radio value='女'>女</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            name='birthday'
                            label='生日'
                            onClick={() => setVisible(true)}
                        >
                            {birthday? dayjs(birthday).format('YYYY-MM-DD') : 'Please select'}

                            <DatePicker
                                visible={visible}
                                // key='birthday'
                                max={now}
                                min={min}
                                defaultValue={time}
                                title='请选择日期'
                                onConfirm={(date) => {
                                    setBirthday(date);
                                    setVisible(false);
                                }}
                                onClose={() => setVisible(false)}
                            ></DatePicker>
                        </Form.Item>
                        <Form.Item
                            name='education'
                            label='学历'
                            className='padd'
                        >
                            <Collapse accordion>
                                <Collapse.Panel style={{ border: '#ffffff' }} key='1' title={education}>

                                    <Radio.Group style={{}} key={education} onChange={(val) => { setEducation(val) }} block defaultValue={education}>
                                        <Space direction='vertical'>
                                            <Radio value='大专'>大专</Radio>
                                            <Radio value='本科'>本科</Radio>
                                            <Radio value='硕士'>硕士</Radio>
                                            <Radio value='博士'>博士</Radio>
                                        </Space>
                                    </Radio.Group>
                                </Collapse.Panel>
                            </Collapse>
                        </Form.Item>
                        <Form.Item
                            name='workTime'
                            label='工作经历'
                            className='padd'
                        >
                            <Collapse accordion>
                                <Collapse.Panel style={{ border: '#ffffff' }} key='1' title={workTime}>

                                    <Radio.Group key={workTime} onChange={(val) => { setWorkTime(val) }} block defaultValue={workTime + '年'}>
                                        <Space direction='vertical'>
                                            <Radio value='9'>9年</Radio>
                                            <Radio value='8'>8年</Radio>
                                            <Radio value='7'>7年</Radio>
                                            <Radio value='6'>6年</Radio>
                                            <Radio value='5'>5年</Radio>
                                        </Space>
                                    </Radio.Group>
                                </Collapse.Panel>
                            </Collapse>
                        </Form.Item>
                        <Form.Item
                            name='phone'
                            label='手机号码'
                            rules={[{ whitespace: true, message: '手机号不能为空' }]}
                        >
                            <Input key={phone} defaultValue={phone} onChange={(val) => { setPhone(val); console.log(val); }} placeholder='请输入手机号' />
                        </Form.Item>
                        <Form.Item
                            name='status'
                            label='求职状态'
                            className='padd'
                        >
                            <Collapse accordion>
                                <Collapse.Panel style={{ border: '#ffffff' }} key='1' title={status}>

                                    <Radio.Group style={{}} key={status} onChange={(val) => { setStatus(val) }} block defaultValue={status}>
                                        <Space direction='vertical'>
                                            <Radio value='在职-考虑机会'>在职-考虑机会</Radio>
                                            <Radio value='在职-月内到岗'>在职-月内到岗</Radio>
                                            <Radio value='离职-随时到岗'>离职-随时到岗</Radio>
                                        </Space>
                                    </Radio.Group>
                                </Collapse.Panel>
                            </Collapse>
                        </Form.Item>
                        <Form.Item
                            name='desc'
                            label='个人简介'

                        >
                            <TextArea
                                maxLength={30}
                                key={desc}
                                defaultValue={desc}
                                onBlur={(val) => { setDesc(val) }}
                                showCount
                            />
                        </Form.Item>
                    </Form>
                    </>
                }

            </div>
        </>
    );
}

export default Overview;